<template>
	<view>
		<view class="tips">为了保证快递准确及时送达，请保证电话和地址填写正确。</view>
		<view class="addCont">
			<label>收货人姓名</label>
			<input type="text" placeholder="请输入姓名" placeholder-style="color:#BBBBBB" v-model="name" />
		</view>
		<view class="addCont">
			<label>手机号码</label>
			<input type="text" placeholder="请输入手机号码" placeholder-style="color:#BBBBBB" v-model="phone" />
		</view>
		<view class="addCont" @click="choosePicker">
			<label>所在地区</label>
			<input type="text" placeholder="请输入地区" placeholder-style="color:#BBBBBB" disabled="disabled" v-model="pickerText" />
		</view>
		<mpvue-city-picker themeColor="#FF9900" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault" @onCancel="onCancel"
		 @onConfirm="onConfirm"></mpvue-city-picker>
		<textarea placeholder="详细地址: 如街道、小区、楼栋号、单元室、门牌号等" v-model="area" />
		<view class="setArea">
			<label>设为默认地址</label>
			<switch :checked="isSet" color="#FF9900" @change="getDefault" style="transform: scale(0.7);"/>
		</view>
	</view>
</template>

<script>
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
	import provinceData from '@/components/mpvue-citypicker/city-data/province.js';
	import cityData from '@/components/mpvue-citypicker/city-data/city.js';
	import areaData from '@/components/mpvue-citypicker/city-data/area.js';
	export default{
		components: {
			mpvueCityPicker
		},
		data() {
			return {
				market_id: uni.getStorageSync('market_id'), //所属上级ID
				usr_id: uni.getStorageSync('userInfo').id,
				cityPickerValueDefault: [0, 0, 0],
				name: '',
				phone: '',
				pickerText: '', //省市区地址
				area: '', //详细地址
				isSet: false, //是否设为默认地址
				itemData: '', //当前修改地址ID
			}
		},
		onNavigationBarButtonTap() {
			var data = {
				usr_id: this.usr_id,
				user_name: this.name,
				phone: this.phone,
				pre_address:  this.pickerText,
				address: this.area
			}
			if(this.itemData.unid) {
				data.unid = this.itemData.unid;
			}
			if(!this.name) {
				this.showToast('请输入收货人姓名');
				return
			} else if(!this.phone) {
				this.showToast('请输入收货人手机号');
				return
			} else if(!this.pickerText) {
				this.showToast('请选择省市区');
				return
			} else if(!this.area) {
				this.showToast('请输入详细街道地址');
				return
			} else {
				this.addArea(data);
			}
		},
		onLoad(e) {
			if(e.data) {
				this.itemData = JSON.parse(decodeURIComponent(e.data));
				this.name = this.itemData.user_name;
				this.phone = this.itemData.phone;
				this.pickerText = this.itemData.pre_address;
				this.area = this.itemData.address;
				if(this.itemData.default == 1) {
					this.isSet = true;
				}
				uni.setNavigationBarTitle({
					title: '编辑地址管理'
				})
			}
		},
		methods: {
			// 添加地址
			addArea(data) {
				this.$sapi.apiPost('v1/' + this.market_id + '/mobile/address/save',data).then(res => {
					if (res.data.code == 200) {
						if(this.isSet && (this.itemData.default == 0 || !this.itemData.unid)) {
							this.setArea(res.data.data.unid);
						} else {
							this.showToast('保存成功');
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								})
							}, 1000);
						}
					} else {
						this.showToast(res.data.message);
					}
				})
			},
			// 设为默认地址
			setArea(areaId) {
				this.$sapi.apiPost('v1/' + this.market_id + '/mobile/address/default/set',{usr_id: this.usr_id,unid:areaId}).then(res => {
					if (res.data.code == 200) {
						this.showToast('保存成功');
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
						}, 1000);
					} else {
						this.showToast(res.data.message);
					}
				})
			},
			// 三级联动选择
			choosePicker() {
				this.$refs.mpvueCityPicker.show();
			},
			// 确认选择
			onConfirm(e) {
				this.pickerText = e.label;
			},
			// 取消选择
			onCancel(e) {},
			// 设置是否默认地址选择
			getDefault(e) {
				this.isSet = e.detail.value;
			},
			// 封装吐司
			showToast(title, icon) {
				var img = 'none';
				if(icon) {
					img = icon;
				}
				uni.showToast({
					title: title,
					icon: img
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F7F7F7;
	}
	.tips{
		color: #333333;
		font-size: 26upx;
		font-weight: 500;
		text-align: center;
		padding: 20upx 0;
		background: rgba(255, 184, 0, 0.57);
	}
	.addCont{
		display: flex;
		align-items: center;
		height: 80upx;
		background-color: #FFFFFF;
		label {
			color: #A8A8A8;
			font-size: 34upx;
			white-space: nowrap;
			padding: 0 30upx;
		}
	}
	textarea{
		background: #FFFFFF;
		text-index: 30upx;
		padding: 30upx;
		width: calc(100% - 60upx);
		border-top: 1px solid #E5E5E5;
		height: 160upx;
	}
	.setArea{
		margin-top: 30upx;
		height: 80upx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30upx;
		label {
			color: #333333;
			font-size: 34upx;
			white-space: nowrap;
		}
	}
</style>
